<style lang="less">
  @import './styles/infor-card.less';
</style>

<template>
  <Card :padding="0">
    <div class="infor-card-con">
      <i-col class="infor-card-icon-con" :style="{backgroundColor: color, color: 'white'}" span="8">
        <Row class="height-100" type="flex" align="middle" justify="center">
          <Icon :type="iconType" :size="iconSize"></Icon>
        </Row>
      </i-col>
      <i-col span="16" class="height-100">
        <Row type="flex" align="middle" justify="center" class="height-100">
          <Tooltip :placement="index === 4?'bottom-end':'bottom-start'" v-if="lists.length > 0">
            <count-up
              class="infor-card-count user-created-count"
              :id-name="idName"
              :end-val="endVal"
              :color="color"
              :countSize="countSize"
              :countWeight="countWeight"
            >
              <p class="infor-intro-text" slot="intro">{{ introText }}</p>
            </count-up>
            <div slot="content">
              <p v-for="list in lists" :key="list.requireId">
                <Icon type="checkmark-round" color="#19be6b"></Icon>
                <i>{{list.code}}</i> - {{list.name}}
              </p>
            </div>
          </Tooltip>
          <count-up v-if="lists.length === 0"
            class="infor-card-count user-created-count"
            :id-name="idName"
            :end-val="endVal"
            :color="color"
            :countSize="countSize"
            :countWeight="countWeight"
          >
            <p class="infor-intro-text" slot="intro">{{ introText }}</p>
          </count-up>
        </Row>
      </i-col>
    </div>
  </Card>
</template>

<script>
  import countUp from './countUp.vue';

  export default {
    name: 'inforCard',
    components: {
      countUp
    },
    props: {
      idName: String,
      endVal: Number,
      color: String,
      iconType: String,
      introText: String,
      index: Number,
      countSize: {
        type: String,
        default: '30px'
      },
      countWeight: {
        type: Number,
        default: 700
      },
      iconSize: {
        type: Number,
        default: 40
      },
      lists: Array
    }
  };
</script>

